<template>
  <view class="container">
    <!-- 1、血氧浓度简介 -->
    <uni-section class="blood-oxygen" title="血氧浓度（SpO2）简介" type="line">
      <uni-card :is-shadow="false" class="blood-oxygen-card">
        <text class="uni-cal">
          血氧浓度（SpO2）是血液中氧气的饱和度，反映了身体的供氧能力。正常的血氧浓度一般为 95% 至 100%。
        </text>

        <!-- 输入框和计算按钮 -->
        <view class="input-area">
          <view class="input-group">
            <text class="label">血氧浓度 (%):</text>
            <input v-model="bloodOxygen" type="number" placeholder="请输入血氧浓度" />
          </view>
          <view class="input-group">
            <text class="label">持续时间 (秒):</text>
            <input v-model="duration" type="number" placeholder="请输入持续时间" />
          </view>

          <!-- 结果展示区 -->
          <view class="result-area">
            <text class="result-label">您的血氧浓度:</text>
            <text class="result-value">{{ bloodOxygen }} %</text>
            <text class="result-status">-{{ status }}</text>
          </view>
          <button @click="calculateBloodOxygen" type="primary">计算血氧状态</button>
        </view>
      </uni-card>
    </uni-section>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bloodOxygen: '', // 用户输入的血氧浓度
        duration: '', // 持续时间（可用于其他分析）
        status: '' // 血氧状态（正常、低血氧等）
      };
    },
    methods: {
      // 计算血氧状态
      calculateBloodOxygen() {
        if (this.bloodOxygen && this.duration) {
          this.setStatus(this.bloodOxygen);
        } else {
          this.status = '请输入完整的血氧浓度和持续时间';
        }
      },
      // 设置血氧状态
      setStatus(bloodOxygen) {
        if (bloodOxygen >= 95 && bloodOxygen <= 100) {
          this.status = '正常血氧浓度';
        } else if (bloodOxygen >= 90 && bloodOxygen < 95) {
          this.status = '轻度低血氧';
        } else if (bloodOxygen >= 80 && bloodOxygen < 90) {
          this.status = '中度低血氧';
        } else if (bloodOxygen < 80) {
          this.status = '重度低血氧';
        }
      }
    }
  };
</script>

<style lang="scss">
  .container {
    padding: 20rpx;

    .blood-oxygen {
      .blood-oxygen-card {
        .input-area {
          margin-top: 20rpx;
        }

        .input-area {
          .input-group {
            display: flex;
            margin: 10rpx 0;
          }
        }
      }

      .result-area {
        margin-top: 20rpx;
        .result-label {
          font-size: 16px;
        }
        .result-value {
          font-size: 20px;
          font-weight: bold;
        }
        .result-status {
          color: #ff4d4f;
          font-size: 14px;
        }
      }
    }
  }
</style>
